<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        .mapcontain {
            width: 100%;
            height: 100%;
        }

        #allmap {
            height: 100%;
            width: 100%;
        }
        #baiduzhao{
            position: fixed;
            width: 100%;
            height: 40px;
            bottom: 0px;
            left: 0px;
            z-index: 1000;
            background-color: #ebe9e6;
        }
    </style>
    <script type="text/javascript"
        src="//api.map.baidu.com/api?type=webgl&v=1.0&ak=dHgMAvhjhtnDE129YAhKnLao2tYir9mm"></script>
    <title>根据起点和终点经纬度驾车导航</title>
</head>

<body style="margin: none">
    <div class="mapcontain">
        <div id="allmap"></div>
    </div>
    <div id="baiduzhao"></div>
</body>

</html>
<script type="text/javascript">
    // 开发文档 https://lbsyun.baidu.com/index.php?title=jspopularGL
    var map = new BMapGL.Map('allmap');
    var point = new BMapGL.Point(116.51397, 39.73517);
    map.centerAndZoom(point, 11);
    map.enableScrollWheelZoom(true);

    var p1 = new BMapGL.Point(116.236532, 39.904113661);
    var p2 = new BMapGL.Point(116.310791, 40.003419);
    var p3 = new BMapGL.Point(116.545486, 40.006040);
    var p4 = new BMapGL.Point(116.486419, 39.877282);

    drawLines([p1, p2, p3, p4]);

    function drawLines(points) {
        for (var i = 0; i < points.length - 1; i++) {
            drawLine(points[i], points[i + 1]);
        }
    }

    function drawLine(startPoint, endPoint) {
        var driving = new BMapGL.DrivingRoute(map, {
            renderOptions: {
                map: map,
                autoViewport: true,
            },
        });
        driving.search(startPoint, endPoint, {
        });
        // 删除起始,终止坐标
        driving.setMarkersSetCallback(function (routes) {
            map.removeOverlay(routes[0].marker);
            map.removeOverlay(routes[routes.length - 1].marker);
            for (var m = 1; m < routes.length - 1; m++) {
                var mm = routes[m].Nm;
                map.removeOverlay(mm)
            }
        });
        driving.setSearchCompleteCallback(function () {
            var plan = driving.getResults().getPlan(0)
            var route = plan.getRoute(0);
            let path = route.getPath();

            setTimeout(() => {
                console.log((parseInt(path.length / 2)));

                var polyline = new BMapGL.Polyline(path, {
                    strokeColor: '#ff0000',
                    strokeWeight: 8,
                    strokeOpacity: 1,
                })
                // 添加点击事件监听器
                polyline.addEventListener("click", function (e) {
                    console.log("折线被点击了");
                    console.log("点击的折线点坐标: " + e.point.lng + ", " + e.point.lat);
                });
                map.addOverlay(polyline)

                var label = new BMapGL.Label("晋AR196Z - 请点击计调车辆");
                label.setStyle({ backgroundColor: "#95afc0", color: "#FFFFFF" });
                label.setPosition(path[parseInt(path.length / 2)]); // 设置位置为中间部分
                map.addOverlay(label);
            }, 100);

        });
    }

    // 绘制各类型点
    function drawIcon(point, iconPath) {
        var icon = new BMapGL.Icon(iconPath, new BMapGL.Size(40, 40));
        // 创建带高度的点，这里只需要size和icon
        var marker = new BMapGL.Marker3D(point, 0, {
            size: 80,
            icon: icon
        });
        // 将点添加到地图上
        map.addOverlay(marker);
    }
    drawIcon(p1, '../resource/img/研学/饭店2.png');
    drawIcon(p2, '../resource/img/研学/基地3.png');
    drawIcon(p3, '../resource/img/研学/酒店.png');
    drawIcon(p4, '../resource/img/研学/基地3.png');



</script>